<script lang="tsx">
import { defineComponent, computed } from 'vue';
export default defineComponent({
    props: {
        level: String,
        showText: {
            type: Boolean,
            default: true
        }
    },
    setup(props) {
        const levelFilter = (level: string | undefined) => {
            switch (level) {
                case '1':
                    return { text: '阻塞', icon: 'iconzusai', colorType: 'error' };
                case '2':
                    return { text: '极低', icon: 'iconjidi', colorType: 'success' };
                case '3':
                    return { text: '低', icon: 'icondi', colorType: 'success' };
                case '4':
                    return { text: '中', icon: 'iconzhong', colorType: 'warning' };
                case '5':
                    return { text: '高', icon: 'icongao', colorType: 'error' };
                case '6':
                    return { text: '最高', icon: 'iconjigao', colorType: 'error' };
                default:
                    return { text: '阻塞', icon: 'iconzusai', colorType: 'error' };
            }
        };
        const getLevelObj = computed(() => {
            return levelFilter(props.level);
        });
        return () => (
            <flexbox>
                <my-icon type={getLevelObj.value.icon} class={[getLevelObj.value.colorType + '-color']} />
                {props.showText && <div class="line" />}
                {props.showText && <span>{getLevelObj.value.text} </span>}
            </flexbox>
        );
    }
});
</script>
<style lang="less" scoped>
.line {
    width: 8px;
    height: 2px;
    margin: 0 4px 0 6px;
    background: #505a6e;
    border-radius: 1px;
}
</style>
